<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<style>
.round_icon {
	width: 130px;
	height: 130px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}

.round_new_icon {
	width: 130px;
	height: 130px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}

.fileinput-button {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.fileinput-button input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
}
</style>
<form action="/wechat/invitationPerfection" method="post">
	内部员工电话<input name="uTel" />
	日期<input name="apDate"/>
	开始时间<input name="apBegin" />
	结束时间<input name="apEnd"  />
	人数<input name="apNum" />
	人脸头像
	<table>
		<tr>
			<td id="img"><span class="fileinput-button" id="input"> <img
																src="/static/images/touxiang.png" id="jpg"
																class="round_icon"> <input type="file"
																style="width: 130px; height: 130px; margin-left: 50px;"
																id="imginput" name="uImg"  accept=".jpg"/>
														</span></td>
		</tr>
	</table>
	成员代表姓名<input name="apName" />
	成员代表电话<input name="apTel" id="tel" />
	<input id="code" type="text" placeholder="请输入验证码" />
<button id="codebutt" type="button" onclick="getcode();">获取验证码</button>
	事由<input name="apReason" />
	
</form>
<script type="text/javascript" src="../../javascript/jquery-3.4.1.min.js"></script>
<script type="text/javascript">

    $(function() {
        $("#imginput").change(function(e) {
            var imgBox = e.target;
            uploadImg($('#imginput'), imgBox)
        });
		var is;
        function uploadImg(element, tag) {
            var file = tag.files[0];
            var imgSrc;
            if (file.type!="image/jpeg") {
				
                alert("请选择人脸头像！");
				is=false;
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(file);
         	if(is!=false){
			   reader.onload = function() {
                	console.log(this.result);
                	imgSrc = this.result;
                	var imgs = document.createElement("img");
                	$(imgs).attr("src", imgSrc);
                	$(imgs).attr("class", "round_new_icon");
					$(imgs).attr("id", "jpg");
                	$("#jpg").remove();
                	$("#input").prepend(imgs);
            	};
        	}
		}
    });
   var codenum;
	function getcode() {
		var tel= $("#tel").val();
		$.ajax({
			url:"/web/verificationCode/"+tel,
			success:function(response){
				 console.log(response.data);
				if(response.success){
					codenum =response.data;
					var code = $("#codebutt");
	   				 code.attr("disabled","disabled");
	    			setTimeout(function(){
	    			code.css("opacity","0.8");
	   				 });
	   					 var time = 60;
	   				 var set=setInterval(function(){
	    			code.html("("+--time+")秒后重新获取");
	    			}, 1000);
	    			setTimeout(function(){
	    			code.attr("disabled",false).html("重新获取验证码");
	    			clearInterval(set);
	    			}, 60000);
				
				}else{
				if(response.errCode==001){
					alert("手机号码已被注册，请重新输入或直接登录");		
				}
			}

				}
			});
		$("#code").blur('input propertychange', function()
				{
				  var inputcode=$("#code").val();
				  if(inputcode!=codenum){
					  alert("验证码输入错误");
				  }
				});
	}

</script>
</body>
</html>